<template>
<div
    class="base-data-view">
    <div class="top-container">
        {{itemData.area}}-{{itemData.horizon}}
    </div>
    <div class="content-container">
        <MyChart
            class="chart-yang"
            ref="MyChartYang">
        </MyChart>
        <MyChart
            class="chart-yin"
            ref="MyChartYin">
        </MyChart>
    </div>
</div>
</template>
<script>
/*
 阴阳离子含量item组件
 */
import MyChart from '@/components/MyChart';
export default {
    name:'ChartItem',
    components:{MyChart},
    props:{
        itemData:{
            type:Object,
            default:()=>{
                return {};
            },
        },
    },
    data() {
        return {
            fontColor:'',
            borderColor:'',
            chartBorderColor:'',
            reportNum:{},
        };
    },
    watch:{
        itemData:{
            handler(){
                this.$nextTick(()=>{
                    this.initData();
                });
            },
            immediate:true,
        },
    },
    mounted() {
        this.fontColor = getComputedStyle(document.documentElement).getPropertyValue('--font-color');
        this.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--border-color');
        this.chartBorderColor = getComputedStyle(document.documentElement).getPropertyValue('--border-color-chart');
    },
    methods: {
        initData(){
            let yinChartEl = this.$refs.MyChartYin;
            let yangChartEl = this.$refs.MyChartYang;
            let yangData = this.itemData.yang;
            let yinData = this.itemData.yin;
            this.drawChart({
                target:yangChartEl,
                data:{
                    title:'阳离子',
                    list:Object.keys(yangData).map(key=>{
                        return {
                            value:yangData[key] || 0,
                            name:key,
                        };
                    }),
                },
            });
            this.drawChart({
                target:yinChartEl,
                data:{
                    title:'阴离子',
                    list:Object.keys(yinData).map(key=>{
                        return {
                            value:yinData[key],
                            name:key,
                        };
                    }),
                },
            });
        },
        drawChart({target,data={}}){  //绘制表格
            let list = data.list;
            var option = {
                title:{
                    text:data.title,
                    left:"center",
                    top:"center",
                    textStyle:{
                        color:"#27D9C8",
                        fontSize:16,
                        align:"center"
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        data: list,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label:{
                            formatter:"{b}：{c}",
                        },
                    }
                ]
            };
            target && target.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
.base-data-view{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    display: grid;
    grid-gap: 5px;
    background-color: rgba(0, 0, 0, 0.258);
    border-radius: 5px;
    >.top-container{
        font-size: 14px;
        border-bottom: 1px solid #0000007e;
        padding: 5px;
        box-sizing: border-box;
    }
    >.content-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: 200px;
    }
}
</style>
